<!-- HTML5文件 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<title>Agile Lite</title>
		<link rel="stylesheet" href="../assets/agile/css/agile.layout.css">
		<link rel="stylesheet" href="../assets/third/flat/flat.component.css">
		<link rel="stylesheet" href="../assets/third/flat/flat.color.css">
		<link rel="stylesheet" href="../assets/third/flat/iconline.css">
		<link rel="stylesheet" href="../assets/third/flat/iconlogo.css">
		<link rel="stylesheet" href="../assets/third/flat/iconform.css">
		<link rel="stylesheet" href="../assets/component/exlist/exlist.css">
		<link rel="stylesheet" href="../assets/app/css/app.css">
		<style type="text/css">
			.detail_mark_div{
				float:left;
				width:50%;
				height:100%;
				background-color: #3779D0;
				text-align: center;
				padding: 12px;
				color: #FFFFFF;
			}
			.delete_mark_div{
				float:left;
				width:50%;
				height:100%;
				background-color: #FF2D2D;
				text-align: center;
				padding: 12px;
				color: #FFFFFF;
			}
		</style>
	</head>
	<body>
		<div id="section_container">
			<section id="list_section" data-role="section" class="active">
				<header>
				    <div class="titlebar">
				    	<a data-toggle="back" href="#"><i class="iconfont iconline-arrow-left"></i></a>
				    	<h1>列表滑动组件</h1>
				    	<a id="detail_modal_edit">编辑</a>
				    </div>
				</header>
				<article data-role="article" id="main_article" data-scroll="verticle" class="active" style="top:44px;bottom:0px;">
					<div class="scroller"> 
					    <ul id="swipe_test" class="listitem">
					        <li class="nowrap_li">
					            <div class="text">
					            	列表滑动组件是基于Agile Lite的一个组件
					            	<small  class="nowrap" style="display:none;">
					            		页面需要引入Agile Lite以及组件本身的css和js文件
					            	</small>
					            </div>
					        </li>
					        <li class="wrap_li">
					            <div class="text">
					            	初始化方式
					            	<small>
					            		var <font color='blue'>ulExList</font> = A.ExList.ulController('#ul_id',<font color='green'>options</font>)
					            	</small>
					            </div>
					        </li>
					        <li class="nowrap_li">
					            <div class="text">
					            	初始化选项(<font color='green'>options</font>)
					            	<small  class="nowrap" style="display:none;">
				            			<p><font color='red'>leftContent</font>：左侧显示内容的html字符串(默认是checkbox，class="exlist_checkbox")。</p>
				            			<p><font color='red'>rightContent</font>：右侧显示内容的html字符串(默认是删除)。</p>
				            			<p><font color='red'>swipeOptionOnTap</font>：右侧点击的回调函数。</p>
					            	</small>
					            </div>
					        </li>
					        <li class="nowrap_li">
					            <div class="text">
					            	返回对象的方法(<font color='blue'>ulExList</font>)
					            	<small  class="nowrap" style="display:none;">
					            		<p><font color='red'>showLeft()</font>:显示左侧;</p>
					            		<p><font color='red'>hideLeft()</font>:隐藏左侧;</p>
					            		<p><font color='red'>refresh()</font>:刷新组件(一般用于新增后);</p>
					            	</small>
					            </div>
					        </li>
					    </ul>
					</div>  
				</article>
				<footer id="edit_footer" style="bottom: -56px;">
					<nav class="menubar">
						<a class="menu active"  id="add_mark">
							<span class="menu-icon iconfont iconline-mark-plus"></span>
						    <span class="menu-text">新增记录</span>
						</a>
						<a class="menu active" id="delete_mark">
							<span class="menu-icon iconfont iconline-trash"></span>
						    <span class="menu-text">删除所选</span>
						</a>
					</nav>
				</footer>
				<script type="text/html" id="add_template">
			        <div style="padding:10px 20px;">
			            <div style="text-align:center;font-size:20px;color:#3498DB;font-weight:600;margin:5px 0;">添加条目</div>
			            <input type="text" name="name" class="full-width" placeholder="条目名称"><div class="rowspace"></div>
			            <input type="text" name="description" class="full-width" placeholder="条目描述"><div class="rowspace"></div>
			            <button class="width-full">添加</button>
			        </div>
		    	</script>
			</section>
		</div>
		
		<!--- third --->
		<script src="../assets/third/jquery/jquery-2.1.3.min.js"></script>
		<script src="../assets/third/jquery/jquery.mobile.custom.min.js"></script>
		<script src="../assets/third/iscroll/iscroll-probe.js"></script>
		<script src="../assets/third/arttemplate/template-native.js"></script>
		<!-- agile -->
		<script type="text/javascript" src="../assets/agile/js/agile.js"></script>
<script type="text/javascript" src="../assets/bridge/exmobi.js"></script>
<script type="text/javascript" src="../assets/bridge/agile.exmobi.js"></script>		
		<!-- app -->
		<script src="../assets/component/exlist/agile.exlist.js"></script>	
		<script type="text/javascript" src="../assets/app/js/app.js"></script>

		<script type="text/javascript">
			$('#main_article').on('articleload',function(){
				$('#detail_modal_edit').text('编辑');

				$('#edit_footer').css('bottom','-56px');

				var nowrapLiController = A.ExList.liController('.nowrap_li',{
					swipeOptionOnTap : function(liElement,targetElement){
						if(targetElement.hasClass('detail_mark_div')){
							A.alert('提示',liElement.find('small').html());
							return false;
						}else if(targetElement.hasClass('delete_mark_div')){
							A.confirm('提示','确定移除该活动吗？', function(){
								var _$this = $(liElement);
								_$this.remove();
							});
						}
						
					},
					rightContent:'<div class="detail_mark_div">详情</div><div class="delete_mark_div">删除</div>'
				});

				var wrapLiController = A.ExList.liController('.wrap_li',{
					swipeOptionOnTap : function(liElement,targetElement){
						A.confirm('提示','确定移除该活动吗？', function(){
							var _$this = $(liElement);
							_$this.remove();
						});
					}
				});

				function showEditMenu(){
					$('#edit_footer').animate({
						bottom:'0px'
					},100);

					$('#main_article').css('bottom','56px');

					A.Scroll('#main_article').refresh();
				}

				function hideEditMenu(){
					$('#edit_footer').animate({
						bottom:'-56px'
					},100);

					$('#main_article').css('bottom','0px');

					A.Scroll('#main_article').refresh();
				}

				function edit(){
					nowrapLiController.showLeft();
					wrapLiController.showLeft();
					$('#detail_modal_edit').text('取消');
					showEditMenu();
					$('#detail_modal_edit').off(A.options.clickEvent).on(A.options.clickEvent,function(){
						nowrapLiController.hideLeft();
						wrapLiController.hideLeft();
						$('#detail_modal_edit').text('编辑');
						$('#detail_modal_edit').off(A.options.clickEvent).on(A.options.clickEvent,edit);
						hideEditMenu();
					});
				}

				$('#detail_modal_edit').off(A.options.clickEvent).on(A.options.clickEvent,edit);

				$('#delete_mark').off(A.options.clickEvent).on(A.options.clickEvent,function(){
					var number = 0;
					$('.exlist_checkbox').each(function(){
						var $li = $(this).parents('li');
						if($(this)[0].checked){
							number++;
						}
					});

					if(number==0){
						A.alert("请选择待删除的活动");
						return;
					}

					A.confirm('提示','确定移除这'+number+'项活动吗？', function(){
						$('.exlist_checkbox').each(function(){
							var _data_key , _date_string;
							var $li = $(this).parents('li');
							if($(this)[0].checked){
								$li.remove();
							}
						});
					});
				});

				$('#add_mark').off(A.options.clickEvent).on(A.options.clickEvent,function(){
					var $popup = A.popup({
				   		html: $('#add_template').html(),
				        css : {width:'auto'},
				        pos : 'center'
				    });
				    $popup.popup.find('button').on(A.options.clickEvent, function(){
			    		var name = $popup.popup.find('[name="name"]').val();
			    		var description = $popup.popup.find('[name="description"]').val();

						if (name == '') {
							A.alert("请输入条目名称");
							return false;
						}

						if (description == '') {
							A.alert("请输入条目描述");
							return false;
						}
/*
						A.confirm('提示', '确定添加吗？', function() {
						});
*/
						var html = '';

						html += '<li class="nowrap_li"><div class="text">';

						html += name;

						html += '<small class="nowrap" style="display:none;">' + description + '</small>';

						html += '</div></li>';

						$('#swipe_test').append(html);

						nowrapLiController.refresh();
						wrapLiController.refresh();

						nowrapLiController.showLeft();
						wrapLiController.showLeft();

						A.Scroll('#main_article').refresh();

						$popup.close();
						
					});
				    return false;
				});
			});
		</script>
		
	</body>
</html>